Coding Schools

Basic Structure of HTML
HTML 5 Features
IFrame in HTML
HTML - div and span tags
HTML - marquee element
HTML - List elements
HTML - paragraph element
HTML - table elements

HTML 5 Features

HTML5 introduced a robust set of new features and elements that enhance the capabilities of web development, making it more powerful and efficient. Here' a rundown of some key features in HTML5:

1. Semantic Elements

HTML5 introduced several new elements that are used to define different parts of a web page more semantically:

<header>: Represents the header of a section or the document.
<nav>: Defines navigation links.
<article>: Specifies independent content.
<section>: Represents a section of the document.
<aside>: Defines content aside from the main content.
<footer>: Represents the footer of a section or the document.

2. Multimedia Elements

HTML5 provides built-in support for multimedia without the need for plugins:

<audio>: Embeds audio content.
<video>: Embeds video content.
<canvas>: Used for drawing graphics via scripting (JavaScript).
<svg>: Supports Scalable Vector Graphics for creating vector images.

3. Form Enhancements

HTML5 includes new input types and attributes for forms:

New input types like email, url, number, range, date, color.
New attributes like placeholder, required, pattern, autofocus.
Form validation features to reduce reliance on JavaScript for validation.

4. APIs and DOM Enhancements

HTML5 introduces several APIs to enhance web application capabilities:

Geolocation API: Access the user's geographic location.
Drag and Drop API: Adds drag-and-drop functionality.
Web Storage: Local storage (localStorage) and session storage (sessionStorage) to store data on the client side.
Web Workers: Background scripts for running tasks in the background without affecting the user interface.
Server-Sent Events (SSE): Enables web apps to receive real-time updates from the server.

5. New Attributes and Elements

Several new elements and attributes have been introduced to improve accessibility and interactivity:

<datalist>: Specifies a list of pre-defined options for input controls.
<output>: Represents the result of a calculation or user action.
<progress>: Displays the progress of a task.
Data attributes: Custom attributes prefixed with 'data-', such as data-role, allow you to embed additional information in HTML elements.

6. Mobile and Responsive Design

HTML5 is designed with mobile devices in mind, making it easier to develop responsive and mobile-friendly web pages:

viewport meta tag: Controls layout on mobile browsers.
Media queries and flexible grid layouts.

Example of HTML5 Features in Action

Here's a brief example that illustrates some of these features:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Features</title>
</head>
<body>
    <header>
        <h1>Welcome to HTML5</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="features">
        <article>
            <h2>Multimedia</h2>
            <video controls>
                <source src="video.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </article>
        
        <article>
            <h2>Form Enhancements</h2>
            <form>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <input type="submit" value="Submit">
            </form>
        </article>
    </section>

    <footer>
        <p>© 2025 HTML5 Features</p>
    </footer>
</body>
</html>

This example captures the essence of HTML5, showcasing enhanced semantics, multimedia support, and form improvements. Is there a specific HTML5 feature you'd like to explore further?